<template>
  <div class="boxer-bottom">
    <ul>
      <router-link to="/" tag="li">
        <img src="/static/img/calendar-on.png" alt="">
        <div>工作日历</div>
      </router-link>
      <router-link to="toll" tag="li">
        <img src="/static/img/order-on.png" alt="">
        <div>抢单接单</div>
      </router-link>
      <router-link to="task" tag="li">
        <img src="/static/img/toll-on.png" alt="">
        <div>任务管理</div>
      </router-link>
      <router-link to="application" tag="li">
        <img src="/static/img/use-on.png" alt="">
        <div>飞桩应用</div>
      </router-link>
      <router-link to="my" tag="li">
        <img src="/static/img/me-on.png" alt="">
        <div>我的</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'topNav'
}
</script>

<style lang="scss" scoped>
  @import '~css/fglz.scss';
.boxer-bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  @include container-width-height(100%,50px);
  background: $brand-white;
  >ul{
    display: flex;
    >li{
      flex: 1;
      height: 50px;
      padding-top: 5px;
      color: $color-gray-item1;
      >img{
        display: block;
        @include container-width-height(30px,30px);
        margin: 0 auto;
      }
      &.router-link-exact-active{
        color:$color-yellow-item4;
      }
    }
  }
}
</style>
